<template>
  <div class="container">
    <h2 class="title">项目介绍</h2>
    <div class="section">
      <h3 class="subtitle">什么是 BI</h3>
      <p class="content">即商业智能：数据可视化、报表可视化系统</p>
      <p class="content">主流 BI 平台：帆软 BI、小马 BI、微软 Power BI</p>
    </div>

    <div class="section">
      <h3 class="subtitle">传统 BI 平台</h3>
      <ul class="feature-list">
        <li>需要人工上传数据</li>
        <li>需要人工拖选分析要用到的数据行和列（数据分析师）</li>
        <li>需要人工选择图表类型（数据分析师）</li>
        <li>生成图表并保存配置</li>
      </ul>
    </div>

    <div class="section">
      <h3 class="subtitle">智能 BI 平台</h3>
      <p class="highlight-content">
        区别于传统的 BI，用户（数据分析者）只需要导入最原始的数据集，输入想要进行分析的目标（比如帮我分析一下网站的增长趋势），就能利用 AI 自动生成一个符合要求的图表以及结论。
      </p>
    </div>

    <div class="image-wrapper">
      <img src="@/assets/BI.jpg"  alt="BI架构图" class="bi-image">
    </div>
  </div>
</template>

<style scoped lang="less">
// 颜色定义
@primary-color: #409EFF;
@text-primary: #303133;
@text-regular: #606266;
@border-color: #DCDFE6;
@light-bg: #f9fafc;

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  background-color: @light-bg;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.title {
  text-align: center;
  font-size: 2.2rem;
  color: @primary-color;
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: 1rem;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: @primary-color;
    border-radius: 4px;
  }
}

.section {
  margin: 2rem 0;
  padding: 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }
}

.subtitle {
  color: @text-primary;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  padding-left: 0.8rem;
  border-left: 6px solid @primary-color;
}

.content {
  color: @text-regular;
  line-height: 2;
  margin: 1rem 0;
  text-align: justify;
}

.highlight-content {
  background: rgba(@primary-color, 0.08);
  padding: 1.5rem;
  border-left: 6px solid @primary-color;
  color: @text-regular;
  line-height: 2;
  border-radius: 8px;
}

.feature-list {
  padding-left: 1.5rem;

  li {
    margin: 1.2rem 0;
    padding: 0.8rem 1.2rem;
    background: rgba(#f0f2f5, 0.7);
    border-radius: 8px;
    transition: all 0.3s;

    &:hover {
      background: rgba(@primary-color, 0.12);
      transform: translateX(8px);
    }
  }
}

.image-wrapper {
  margin: 2rem auto;
  text-align: center;
  padding: 1.5rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

  .bi-image {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    transition: transform 0.3s;

    &:hover {
      transform: scale(1.03);
    }
  }
}

// 移动端适配
@media (max-width: 768px) {
  .container {
    padding: 1.5rem;
  }

  .title {
    font-size: 1.8rem;
  }

  .subtitle {
    font-size: 1.4rem;
  }

  .section {
    padding: 1.5rem;
  }

  .content,
  .highlight-content {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  .feature-list li {
    font-size: 0.9rem;
    margin: 1rem 0;
    padding: 0.7rem 1rem;
  }

  .image-wrapper {
    padding: 1rem;
  }
}
</style>
